<template>
    <div class="tmpl" style="height:440px;">
        <nav-bar title="商品列表"></nav-bar>
        <!--ref 获取DOM对象-->
        <mt-loadmore :bottom-method="loadBottom"
                     :bottom-all-loaded="allLoaded"
                     :auto-fill="isAutoFill" ref="loadmore">
            <ul class="mui-table-view mui-grid-view">
                <li v-for="good in goods" :key="good.id" class="mui-table-view-cell mui-media mui-col-xs-6">
                    <router-link :to="{name:'goods.detail',query:{id:good.id}}">
                        <img class="mui-media-object" :src="good.imgUrl">
                        <div class="mui-media-body" v-text="good.title">好东西啊</div>
                        <div class="desc">
                            <div class="sell">
                                <span>￥{{good.sellPrice}}</span>
                                <s>￥{{good.marketPrice}}</s>
                            </div>
                            <div class="detail">
                                <div class="hot">
                                    热卖中
                                </div>
                                <div class="count">
                                    剩{{good.stockQuantity}}件
                                </div>
                            </div>
                        </div>
                    </router-link>
                </li>
            </ul>
        </mt-loadmore>
    </div>
</template>

<script>
    export default {
        name: "googsShare",
        data() {
            return {
                goods: [],//商品列表数据
                pageIndex: 0,
                allLoaded: false,//是否禁止触发上拉函数,默认false
                isAutoFill: false,//是否自动触发上拉函数,默认true
            }
        },
        created() {
            this.loadMoreByPage();
        },
        methods: {
            loadBottom() {
                //console.log('上拉触发');
                this.loadMoreConcat();
            },
            loadMoreByPage() {
                //发起请求获取数据填充到页面
                this.$ajax.get('goods/findGoods/0')
                    .then(res => {
                        this.goods = res.data.message.content;
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },
            //追加数据
            loadMoreConcat() {
                this.$ajax.get('goods/findGoods/' + (++this.pageIndex))
                    .then(res => {
                        this.goods = this.goods.concat(res.data.message.content);
                        //通知上拉操作完结
                        this.$refs.loadmore.onBottomLoaded();
                        if (this.pageIndex === (res.data.message.totalPages - 1)) {
                            //禁止上拉函数
                            this.allLoaded = true;
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    })
            }
        }

    }
</script>

<style scoped>
    .mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn) {
        margin: 0px;
        padding: 0px;
        border: 1px solid #5c5c5c;
        box-shadow: 0 0 4px #666;
    }

    .sell > span {
        float: left;
        color: red;
        text-align: left;
    }

    .detail > .hot {
        float: left;
        text-align: left;
        font-size: 15px;
    }

    .detail > .count {
        float: right;
        text-align: right;
        font-size: 15px;
    }

    /*撑开，去除浮动没有的高度*/

    .detail {
        overflow: hidden;
    }

    .desc {
        color: rgba(92, 92, 92, 0.8);
        background-color: rgba(0, 0, 0, 0.2);
    }

    .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {
        height: 200px;
    }
</style>